<!--收支明细页面-->
<template>
	<view>
		<view class="top">
			<text class="nav" v-for="(item, index) in nav" :key="item.id" :class=" tableIndex == index ? 'active' : ''"
				@click="navClick(item.id, index)">
				{{item.val}}
			</text>
		</view>
		<view class="time_wrap">
			<picker class="time_picker" mode="date" :end="nowTime" fields="month" @change="handleDate">
				<view class="time_month">{{ time }}<text class="triangle-down"></text></view>
			</picker>
			<view class="text">收入￥{{intotal}} 支出￥{{outTotal}}</view>
		</view>
		<!--暂无数据-->
		<view class="nocontent" v-if="list.length == 0">
			<image src="/static/image/public/WSJ.png" class="wsjImg"></image>
			<view>暂无数据</view>
		</view>
		<view class="list" v-else>
			<view class="item" v-for="item in list" :key="item.id">
				<view>
					<view class="name com_title">{{item.typeName}}</view>
					<view class="time">{{item.createTime}}</view>
				</view>
				<view class="num">
					<text v-if="item.ioType">+</text>
					<text v-else>-</text>
					{{item.total}}
					<view class="status" v-if="item.stateName">{{item.stateName}}</view>
				</view>
			</view>
		</view>
		<!--end  pageList-->
		<uni-load-more :status="status" v-if="pageSize > 1" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav: [{
					id: 2,
					val: "全部"
				}, {
					id: 1,
					val: "收入"
				}, {
					id: 0,
					val: "支出"
				}],
				tableIndex: 0,
				nowTime: "",
				time: "",
				ioType: 2,
				pageNo: 0,
				pageSize: 0,
				intotal: 0,
				outTotal: 0,
				list: [],
				status: "more"
			};
		},
		onLoad() {
			let obj = {};
			if (this.time) {
				obj.date = this.time;
			} else {
				//获取当前时间
				let timestamp = Date.parse(new Date());
				let date = new Date(timestamp);
				//获取年份  
				let Y = date.getFullYear();
				//获取月份  
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let time = Y + "-" + M
				this.time = time;
				this.nowTime = time;
				obj.date = time;
			}
			obj.ioType = this.ioType;
			this.getList(obj);
		},
		onReachBottom: function() {
			let that = this;
			let pageNo = this.pageNo + 1;
			if (pageNo <= this.pageSize) {
				let maxId = that.list[that.list.length - 1].id;
				let obj = {
					pageNo: pageNo,
					data: that.time,
					ioType: that.ioType,
					maxId: maxId
				}
				that.getMoreData(obj)
			} else {
				that.status = "noMore"
			}
		},
		methods: {
			//导航栏点击
			navClick(type, index) {
				if (this.tableIndex == index) return;
				this.tableIndex = index;
				this.ioType = type;
				let obj = {
					ioType: type,
					data: this.time,
					pageNo:1
				}
				this.getList(obj);
			},
			//时间选择
			handleDate(e) {
				let time = e.detail.value;
				this.time = time;
				console.log(e.detail.value)
				this.getList({
					ioType: this.ioType,
					data: this.time,
					pageNo:1
				});
			},
			//获取收支明细
			getList(params) {
				this.$api.getIncomeList(params).then(res => {
					console.log(res);
					let resD = res.data.data;
					this.list = resD.page.records;
					this.intotal = resD.inTotal;
					this.outTotal = resD.outTotal;
					this.pageNo = resD.page.current;
					this.pageSize = resD.page.pages;
				})
			},
			getMoreData(params) {
				this.$api.getIncomeList(params).then(res => {
					let resD = res.data.data;
					let data = resD.page.records;
					if (data) {
						this.list = this.list.concat(data);
						this.intotal = resD.inTotal;
						this.outTotal = resD.outTotal;
						this.pageNo = resD.page.current;
						this.pageSize = resD.page.pages;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		width: 100%;
		white-space: nowrap;
		padding: 0 30rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.nav {
			height: 80rpx;
			background-color: white;
			font-size: 26rpx;
			position: relative;
			line-height: 80rpx;
		}

		.active {
			color: black;
			font-size: 15px;
			font-weight: bold;
		}

		.active::after {
			content: "";
			width: 40rpx;
			height: 4rpx;
			background: $dtg-color-primary;
			border-radius: 4rpx;
			margin: -4rpx auto;
			display: block;
			animation: roll .23s linear;
		}

		@keyframes roll {
			0% {
				width: 0;
			}

			100% {
				width: 40rpx;
			}
		}

		.con {
			overflow: hidden;
		}
	}

	.time_wrap {
		height: 110rpx;
		background: #F8F8F8;
		padding: 0 30rpx;

		.time_select {
			display: inline-block;
		}

		.time_picker {
			width: 160rpx;
		}

		.time_month {
			position: relative;
			font-size: 28rpx;
			color: #333333;
			height: 66rpx;
			line-height: 84rpx;
			padding: 0 20rpx;
			width: 160rpx;
		}

		.triangle-down {
			position: absolute;
			top: calc(50% + 4rpx);
			left: 140rpx;
		}

		.text {
			font-size: 24rpx;
			color: #999999
		}
	}

	.list {
		padding: 0 30rpx;

		.item {
			height: 150rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #eeeeee;
			align-items: center;

			.time {
				font-size: 24rpx;
				color: #999
			}

			.num {
				font-size: 38rxp;
				font-weight: bold;
			}

			.status {
				font-size: 24rpx;
				color: #FC4073;
				font-weight: normal;
			}
		}
	}

	.nocontent {
		width: 100%;
		font-size: 15px;
		text-align: center;
		padding-top: 160rpx;
		color: #999999;
		line-height: 50px;

		.wsjImg {
			width: 180px;
			height: 125px;
			margin: 0 auto;
		}
	}
</style>
